import React, { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import axios from 'axios'
import { ListRawState } from '../home';
import { CartO, ChatO, ShopO } from '@react-vant/icons'
import { ActionBar } from 'react-vant'
import { useDispatch } from 'react-redux';
const Index: React.FC = () => {
  const { id } = useParams();
  const [v, setV] = useState<ListRawState>({} as ListRawState)
  const dispatch = useDispatch()
  const navigate = useNavigate()
  useEffect(() => {
    axios.get('/api/list/detail', { params: { id } }).then(resp => {
      setV(resp.data.data)
    })
  }, [])
  return (
    <div>
      <dl>
        <dt>
          <img src={v.image} alt="" width="100%" />
        </dt>
        <dd>
          <h3>
            <span>{v.title}</span>
            <span>{v.id}</span>
          </h3>
          <p>{v.desc}</p>
          <p>单价：{v.price}</p>
        </dd>
      </dl>

      <ActionBar>
        <ActionBar.Icon
          icon={<ChatO />}
          text='客服'
          onClick={() => console.log('chat click')}
        />
        <ActionBar.Icon
          icon={<CartO />}
          text='购物车'
          onClick={() => navigate(`/cart`)}
        />
        <ActionBar.Icon
          icon={<ShopO />}
          text='店铺'
          onClick={() => console.log('shop click')}
        />
        <ActionBar.Button
          type='danger'
          text='立即购买'
          onClick={() => dispatch({
            type: 'addCar', payload: {
              ...v,
              count: 1,
              state: true
            }
          })}
        />
      </ActionBar>
    </div>
  )
}

export default Index